<template>
	<div class="pop-up-child" v-if="showLiveInvitation">
		<div class="header-box">
			<header class="header">
				<p class="title" v-text='inviteTitle'></p>
				<div class="close" @click="close"></div>
			</header>
		</div>
		<div class="main-box">
			<div class="invite-description" v-if="tipTxetBoolen">
				{{tipText.length>17&&State['tipText']?tipText.substring(0,17)+'...':tipText}}<a
					v-bind:style="{display:tipText.length>17?'inline':'none'}" v-on:click="toggle"
					rel="tipText">{{State['tipText']?'展开':'收起'}}</a></div>
			<!-- 个人排名 -->
			<div v-if='isGRPM' class="item-rank my-rank">
				<p class="num-box-index">
					<span>{{personageData.rowNo || '-'}}</span>
				</p>
				<img onerror="imgError()" :src="personageData.avatar || wxPic || imgTx" />
				<span class="name-box">{{personageData.nick||nickName||un}}</span>
				<p class="invited-num">已邀<span>{{personageData.c | qianwei}}</span>人</p>
			</div>
			<!-- 列表 -->
			<ul class="InvitationListArray-box">
				<p v-if="topThreeInvitationList.length==0" class="order-box-noData">
                   暂无数据
				</p>
				<div v-else class="order-box">
					<div :class="`box${index+1}`" v-for="(v,index) in topThreeInvitationList" :key="index">
						<div class="item-top-box" :class="!v.avatar?'img-no':''">
							<img onerror="imgError()" v-if="v.avatar" :src="v.avatar" />
							<span class="name-box">{{v.nick||v.fromUn}}</span>
							<p class="invited-num"><span>{{v.c | qianwei}}</span></p>
						</div>
					</div>
				</div>
				<li v-for="(v,index) in InvitationListArray" :key="index">
					<div class="item-rank">
						<p class="num-box-index">
							{{index+4}}
						</p>
						<img onerror="imgError()" :src="v.avatar" />
						<span class="name-box">{{v.nick||v.fromUn}}</span>
						<p class="invited-num">已邀<span>{{v.c| qianwei}}</span>人</p>
					</div>
				</li>
			</ul>
			<p class="clickMore" @click="clickMore">{{moreTipText}}</p>
		</div>
	</div>
</template>
<script>
	import config from "../../config"
	export default {
		components: {
			// Name
		},
		props: {
			roomInfo: Object, //房间信息
			videoInfo: Object, //回看信息
			pageType: String, //直播间 回看区分
			isFrom: String, //来自横竖屏直播和回看
		},
		data() {
			return {
				State: {
					tipText: true
				},
				showLiveInvitation: true,
				inviteTitle: '',
				topThreeInvitationList: [], //前三位
				InvitationListArray: [],
				InvitationListNewArray: [],
				imgArray: [
					require('../../assets/images/num1.png'),
					require('../../assets/images/num2.png'),
					require('../../assets/images/num3.png'),
				],
				// tipText: "点击右上角分享按钮，邀请好友进入该场直播,截止本场直播结束前，邀请榜前三名的用户将获得惊喜大奖。",
				tipText: '',
				newTipText: "",
				tipTxetBoolen: false,
				page: 1,
				moreTipText: "",
				channelArr: [config.ZHANGHANG_01, config.ZGYH, config.ZGYH_PX],
				yqylShow: false,
				personageData: {}, //个人排行数据
				isGRPM: false,
				videoId: '', //回看传过来的id
				un: '',
				nickName: '',
				wxPic: '',
			}
		},
		created: function() {
			if (this.pageType == 'lookBackPage' || this.isFrom == 'landspaeBackCom') { //回看
				this.videoId = this.$route.params.id;
				this.getBackInvitationList()
				this.inviteTitle = this.videoInfo.tables[this.videoInfo.tables.findIndex(m => m.type == 4)].title
			} else { //直播
				this.getInvitationList()
				this.getInviteFromUn()
				this.inviteTitle = this.roomInfo.tables[this.roomInfo.tables.findIndex(m => m.type == 4)].title
			}
			if (this.$store.state.userInfo.un != undefined && this.$store.state.userInfo.un.length > 0) { //im 消息初始化
				this.un = this.$store.state.userInfo.un;
				this.nickName = this.$store.state.userInfo.nickname;
				this.wxPic = this.$store.state.userInfo.wxpic;
			}
		},
		computed: {
			uinfo() {
				return this.$store.state.userInfo;
			},
		},
		watch: {
			uinfo(curVal, oldVal) {
				if (curVal.un != undefined && curVal.un.length > 0) {
					this.un = this.$store.state.userInfo.un;
					this.nickName = this.$store.state.userInfo.nickname;
					this.wxPic = this.$store.state.userInfo.wxpic;
				}
			},
		},
		mounted() {},
		methods: {
			toggle(e) {
				var a = e.target,
					rel = a.getAttribute('rel');
				this.State[rel] = !this.State[rel];
			},
			getBackInvitationList() {
				this.$http.get('/h5live/vod/shareInviteRank?vid=' + this.videoId + "&p=" + this.page).then((res) => {
					if (res.data.code == '000000') {
						if (!this.$store.state.isYk) { //游客不展示 个人信息
							this.isGRPM = true;
							this.personageData = res.data.data.myRank; //个人排名
						}
						if (res.data.data.statList.length >= 10) {
							this.moreTipText = "查看更多分享榜单"
						}
						this.InvitationListArray = res.data.data.statList.splice(3); //整个数组
						this.topThreeInvitationList = res.data.data.statList
						if (this.topThreeInvitationList.length == 1) {
							this.topThreeInvitationList.push({
								nick: '--'
							}, {
								nick: '--'
							})
						}
						if (this.topThreeInvitationList.length == 2) {
							this.topThreeInvitationList.push({
								nick: '--'
							})
							console.log(this.topThreeInvitationList, 'this.topThreeInvitationList')
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
			close() { //
				this.$emit('formChildMsg', { //关闭邀请榜弹出层
					type: 'closeAll',
					data: ''
				})
			},
			getInviteFromUn() { //个人排名
				this.$http.get("/h5live/getInviteFromUn?roomId=" + this.roomInfo.roomInfo.roomId).then(
					res => {
						if (res.data.code == '000000') {
							this.personageData = res.data.data
							if (!this.$store.state.isYk) { //游客不展示 个人信息
								this.isGRPM = true
							}
						} else {
							console.log('个人邀请接口错误')
							this.isGRPM = false
						}
					}
				)
			},
			getInvitationList() {
				this.$http.get('/h5live/shareInviteRank?roomId=' + this.roomInfo.roomInfo.roomId + "&p=" + this.page).then(
					res => {
						if (res.data.code == '000000') {
							if (res.data.data.invitaNote) {
								this.tipTxetBoolen = true;
								this.tipText = res.data.data.invitaNote;
							} else {
								this.tipTxetBoolen = false;
							}
							if (res.data.data.statList.length >= 10) {
								this.moreTipText = "查看更多分享榜单"
							}
							this.InvitationListArray = res.data.data.statList.splice(3); //整个数组
							this.topThreeInvitationList = res.data.data.statList
							if (this.topThreeInvitationList.length == 1) {
								this.topThreeInvitationList.push({
									nick: '--'
								}, {
									nick: '--'
								})
							}
							if (this.topThreeInvitationList.length == 2) {
								this.topThreeInvitationList.push({
									nick: '--'
								})
								console.log(this.topThreeInvitationList, 'this.topThreeInvitationList')
							}
						}
					},
					err => {
						console.log(err);
					})
			},
			clickMore() {
				if (this.pageType == 'lookBackPage' || this.isFrom == 'landspaeBackCom') { //回看
					this.loadBackMore()
				} else {
					this.loadLiveMore()
				}
			},
			loadLiveMore() { //直播间更多
				this.page++
				this.$http.get('/h5live/shareInviteRank?roomId=' + this.$route.params.roomid + "&p=" + this.page).then((
					res) => {
					if (res.data.code == '000000') {
						this.InvitationListNewArray = res.data.data.statList; //整个数组
						for (var i = 0; i < this.InvitationListNewArray.length; i++) {
							this.InvitationListArray.push(this.InvitationListNewArray[i]);
						}
						if (this.InvitationListNewArray.length == 0) {
							this.moreTipText = "没有更多数据"
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
			loadBackMore() { //回看更多
				this.page++
				this.$http.get('/h5live/vod/shareInviteRank?vid=' + this.videoId + "&p=" + this.page).then((res) => {
					if (res.data.code == '000000') {
						this.InvitationListNewArray = res.data.data.statList; //整个数组
						for (var i = 0; i < this.InvitationListNewArray.length; i++) {
							this.InvitationListArray.push(this.InvitationListNewArray[i]);
						}
						if (this.InvitationListNewArray.length == 0) {
							this.moreTipText = "没有更多数据"
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
		},
		filters: {
			qianwei(value) {
				if (!value) return '0'
				let num = value.toString()
				return num.replace(/(?!^)(?=(\d{3})+$)/g, ',')


			}
		}
	};
</script>
<style scoped>
	.pop-up-child {
		width: 100%;
		height: 835px;
		background: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1501;
		border-radius: 20px 20px 0px 0px;
	}

	.pop-up-child .header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-top: 36px;
		padding-left: 36px;
		padding-right: 20px;
		margin-bottom: 38px;
		line-height: 48px;
	}

	.pop-up-child .header::before {
		content: '';
		height: 48px;
		width: 48px;
	}

	.title {
		font-size: 34px;
		font-weight: 500;
		color: #333333;
	}

	.pop-up-child .close {
		height: 48px;
		width: 48px;
		background: url('../../assets/images/zxjt/invitation_list/close.png') no-repeat;
		background-size: 100% 100%;
	}

	.pop-up-child .iconcha1 {
		padding: 0 30px;
		font-size: 18px;
		color: #c8c9cc;
	}

	.invitation-list-content {
		width: 100%;
		max-height: calc(678px - 64px);
		overflow-y: scroll;
	}

	.head-tip-box {
		position: relative;
	}

	.icon-box {
		position: absolute;
		right: 20px;
		bottom: 14px;
	}

	.head-tip-box .iconspread-line,
	.head-tip-box .iconshouqi-copy {
		font-size: 32px;
		color: #FFFFFF;
	}

	.head-tip-box p {
		padding: 10px 20px;
		margin-top: 10px;
		font-size: 26px;
		font-weight: 400;
		line-height: 44px;
		color: #FFFFFF;
		background: linear-gradient(180deg, #F93A4A, #F84A4C);
		box-shadow: 0px 4px 8px 1px rgba(255, 0, 18, 0.13);
		border-radius: 0px 15px 15px 0px;
	}

	.head-tip {
		width: fit-content;
	}

	.invite-description {
		position: relative;
		padding: 12px 34px;
		margin: 0 68px;
		background: #FCF8F1;
		border-radius: 2px;
		font-size: 26px;
		font-weight: 400;
		color: #C09454;
		line-height: 37px;
	}

	.show-hidden {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.invite-description a {
		position: absolute;
		right: 30px;
		width: 70px;
		text-align: left;
		font-size: 22px;
		font-weight: 400;
		color: #C3A984;
	}

	.invite-description a::after {
		position: absolute;
		display: inline-block;
		content: '';
		top: 6px;
		left: 50px;
		height: 22px;
		width: 22px;
		background: url('../../assets/images/zxjt/invitation_list/expand.png') no-repeat;
		background-size: 100% 100%;
	}

	.list-left {
		width: 150px;
		height: 115px;
		line-height: 115px;
		text-align: center;
		font-size: 24px;
		color: #494949;
		float: left;
		background-size: 49px 75px;
		display: flex;
		justify-content: center;
	}

	.list-left.order {
		font-size: 36px;
		font-weight: bold;
		color: #666666;
		line-height: 125px;
	}

	.list-left-img {
		width: 55px;
		height: 75px;
		border: none;
		background-size: 49px 75px;
		margin: 20px 0 0 0;
	}

	.list-tx {
		width: 66px;
		height: 115px;
		/*background: url(../assets/images/person_15.png) no-repeat center center;*/
		display: inline-block;
		border-radius: 50%;
		background-size: 65px 65px;
		position: relative;
	}

	.list-tx img {
		width: 66px;
		height: 66px;
		border-radius: 50%;
		margin-top: 27px;
		background-size: 65px 65px;
	}

	.list-niakname {
		width: 236px;
		height: 115px;
		float: left;
		margin-left: 30px;
		/*	background: #4381F8;*/
		line-height: 115px;
		text-align: left;
		font-size: 28px;
		color: #6b6969 !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.invitation-list-content ul li span {
		color: #b5b5b5;
		font-size: 28px;
		line-height: 115px;
	}

	.no-personage {
		color: #FE4B52 !important;
		font-size: 26px !important;
	}

	.rowNo-pm {
		color: #FE4B52 !important;
		font-size: 22px !important;
		margin-top: 20px;
	}

	.rowNo-num {
		color: #666666 !important;
		font-size: 36px !important;
		margin-top: 10px;
	}

	.row-big-box {
		width: 150px;
		display: felx;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		line-height: 20px !important;
	}

	.list-text1 {
		margin-left: 10px;
		float: left;
	}

	.list-text2 {
		width: 90px;
		height: 115px;
		float: left;
		text-align: center;
		color: rgba(203, 53, 55, 1) !important;
	}

	.list-text3 {
		margin: 0 20px 0 5px;
	}

	.list-right {
		width: 17px;
		height: 115px;
		background: url(../../assets/images/to_11.png) no-repeat center center;
		float: right;
		margin-right: 22px;
		background-size: 17px 29px;
		animation: up 3s linear infinite;
	}

	@keyframes up {
		0% {
			transform: translateY(-10px);
		}

		50% {
			transform: translateY(10px);
		}

		100% {
			transform: translateY(-10px);
		}
	}

	.cut-off-rule-box {
		width: 750px;
		height: 20px;
		background: rgba(249, 249, 249, 1);
	}

	.line {
		width: 90%;
		background: #e2e2e2 !important;
		margin-left: 40px;
		height: 2px;
		border: none;
	}

	.clickMore {
		width: 750px;
		font-size: 30px;
		color: #b5b5b5;
		text-align: center;
		margin: 20px 0 30px;
		line-height: 50px;
	}

	.main-box {
		height: calc(100% - 120px);
		overflow-y: auto;

	}

	.my-rank~.clickMore {
		padding-bottom: 140px;
	}

	.item-rank {
		padding-left: 67px;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #FFFFFF;
		margin: 18px 0;
	}

	.my-rank {
		position: absolute;
		bottom: 0;
		margin: 0;
		padding: 22px 67px 36px;
		box-shadow: 0px -2px 4px 0px rgba(181, 181, 181, 0.5);
	}

	.num-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20px;
		font-size: 26px;
		color: #333333;
	}

	.item-rank img {
		height: 71px;
		width: 71px;
		border-radius: 50%;
		margin-right: 20px;
	}

	.name-box {
		width: 200px;
		font-size: 28px;
		color: #333333;
	}

	.num-box span:nth-of-type(1) {
		margin-bottom: 4px;
	}

	.invited-num {
		width: 200px;
		text-align: center;
		font-size: 24px;
		color: #AAAAAA;
	}

	.invited-num span {
		margin: 0 15px;
		color: #ED465A;
	}

	.InvitationListArray-box {
		display: flex;
		flex-direction: column;
	}

	.num-box-index {
		width: 46px;
		text-align: left;
		margin-right: 20px;
		font-size: 28px;
		color: #333333;
	}

	.num-box-index+img+.name-box {
		width: 254px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.order-box {
		height: 310px;
		width: calc(100vw - 126px);
		margin: auto;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/* background-color: red; */
	}
	.order-box-noData{
		height: 310px;
		width: 100%;
		text-align: center;
		font-size: 26px;
		font-weight: 500;
		color: #999999;
		line-height: 30px;
		padding-top: 288px;
	}

	.item-top-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.item-top-box img {
		height: 121px;
		width: 121px;
		margin-bottom: 16px;
		border-radius: 50%;
		border: 3px solid #FFFFFF;
	}

	.box2 .item-top-box img,
	.box3 .item-top-box img {
		height: 89px;
		width: 89px;
	}

	.item-top-box .invited-num {
		font-size: 20px;

	}

	.item-top-box .name-box {
		text-align: center;
		margin-bottom: 20px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.box1 {
		height: 282px;
		width: 215px;
		background: url('../../assets/images/zxjt/invitation_list/no1.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 1;
	}

	.box1 .item-top-box {
		position: relative;
		top: 9px;
		left: 8px;
	}

	.box2 {
		height: 245px;
		width: 191px;
		background: url('../../assets/images/zxjt/invitation_list/no2.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.box2 .item-top-box {
		position: relative;
		top: 6px;
		left: 5px;
	}

	.box3 {
		height: 245px;
		width: 191px;
		background: url('../../assets/images/zxjt/invitation_list/no3.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.box3 .item-top-box {
		position: relative;
		top: 6px;
		left: 5px;
	}

	.order-box .img-no {
		top: 110px;
	}
</style>
